<template>
  <div>

    <h1> user 组件</h1>

    <!-- 第一种方式 -->
    <div> 获取vuex 的值： {{ $store.state.count }} </div>
    <div> 获取vuex 的值： {{ $store.state.msg }} </div>

    <!-- 第二种写法 -->

    <hr>
    <div> 第二种写法获取vuex 的值： {{ count }} </div>
    <div> 第二种写法 获取vuex 的值： {{ msg }} </div>

    <button @click="addClick"> 点击 ++</button>

    <button @click="asyncAddClick"> 异步actions点击 ++</button>

    <div> 计算属性 :{{ $store.getters.getEven }}</div>

    <div> 计算属性映射写法 :{{ getEven }}</div>

  </div>
</template>



<script>

import {
  mapState, useStore, mapMutations,

  mapActions, mapGetters
} from 'vuex'


// import userStore from '../../store/user'

export default {
  // setup () {
  //   const userStore = useStore()  //  use  只能在setup里面使用


  //   const addClick = () => {
  //     userStore.commit('addCount')
  //   }
  //   return {
  //     addClick
  //   }
  // },


  // state getters  在 computed   映射
  // mutations  actions 在 methods 映射
  computed: {
    ...mapState(['msg', 'count', 'arr']), // 推荐的写法
    ...mapGetters(['getEven'])

  },
  methods: {
    ...mapMutations(['addCount']),
    ...mapActions(['asyncAddCount']),

    addClick () {
      this.addCount()
    },

    // asyncAddClick () {
    //   // console.log(userStore)
    //   userStore.dispatch('asyncAddCount')
    // }


    asyncAddClick () {
      this.asyncAddCount()


    }

  }

}






</script>

<style lang="scss" scoped></style>